<template lang="html">
  <div>
    <div class="btn">
        <el-button type="primary" @click="back">返回上级</el-button>
    </div>
    <div class="box">
      <el-container>
          <el-aside width="200px">
            <el-menu
              :default-active="$store.state.category.idx"
              @select="selectIdx"
              class="el-menu-vertical-demo">
              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">基本信息</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-setting"></i>
                <span slot="title">属性设置</span>
              </el-menu-item>
              <el-menu-item index="4" >
                <i class="el-icon-setting"></i>
                <span slot="title">商品图片</span>
              </el-menu-item>
              <el-menu-item index="5">
                <i class="el-icon-setting"></i>
                <span slot="title">商品问题</span>
              </el-menu-item>
              <el-menu-item index="6">
                <i class="el-icon-setting"></i>
                <span slot="title">SEO</span>
              </el-menu-item>
              <el-menu-item index="7">
                <i class="el-icon-setting"></i>
                <span slot="title">商品详细介绍</span>
              </el-menu-item>
              <el-menu-item index="8">
                <i class="el-icon-setting"></i>
                <span slot="title">自定义属性</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
              <commodityInfoVue v-if="$store.state.category.idx == 2" :item="$route.query.item"/>
              <attributeVue v-if="$store.state.category.idx == 3" />
              <addImgVue v-if="$store.state.category.idx == 4"/>
              <qaVue v-if="$store.state.category.idx == 5"/>
              <seoVue v-if="$store.state.category.idx == 6"/>
              <productDetailVue v-if="$store.state.category.idx == 7"/>
              <customattributeVue v-if="$store.state.category.idx == 8"/>

          </el-main>
        </el-container>
    </div>
  </div>
</template>

<script>
  import commodityInfoVue from './commodityInfo/commodityInfo.vue'
  import attributeVue from './attribute/attribute.vue'
  import addImgVue from './addImg/addImg.vue'
  import qaVue from './qa/qa.vue'
  import productDetailVue from './productDetail/productDetail.vue'
  import seoVue from './seo/seo.vue'
  import customattributeVue from './customattribute/customattribute.vue'

  export default {
    components : {
      commodityInfoVue,
      attributeVue,
      addImgVue,
      qaVue,
      productDetailVue,
      seoVue,
      customattributeVue
    },
    data () {
        return {
          idx : '2',
          isLuxuries : ''
        }
    },
    mounted () {

    },
    methods : {
      selectIdx (index) {
       this.$store.state.category.idx = index
      },
      back () {
        this.$router.push({
          name : 'productAdmins'
        })
      }
    }
  }
</script>

<style  scoped>
.btn {
  margin-top: 10px;
}
.box {
  height: 100%;
  width: 100%;
  background-color: #fff;
  margin-top: 20PX;
}
.r {
  height: 100%;
}
.el-container {
  height: 500px;
}
.el-menu {
  height: 100%;
  /* padding: 20px 0; */
}
</style>
